import React, { useRef, useState } from 'react';
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/pagination';

import './index.less'
// import required modules
import CalendarDates from "calendar-dates";
const calendarDates = new CalendarDates();

import { Pagination, Virtual } from 'swiper/modules';
import { useEffect } from 'react';

export default function App() {
    const [listData, setListData] = useState([]);

    const [currentDate] = useState(new Date());
    //当前的年份个月份
    const [y, setY] = useState(currentDate.getFullYear());
    const [m, setM] = useState(currentDate.getMonth());


    //最左边和最右边的月份
    const [leftM, setLeftM] = useState(currentDate.getMonth());
    const [rightM, setRightM] = useState(currentDate.getMonth());


    const swiperRef = useRef();
    
    const getDate = async  (index) => {

        let newM;
        if(index){
            newM = rightM
            //向右边滑动
            rightM === m ? newM +=2 : newM +=1        
        }else{
            newM = leftM
            //向左边滑动
            leftM === m ? newM -=2 : newM -=1
        }
        const dd = new Date(y, newM);
        const res = await calendarDates.getDates(dd);

        setListData((prev) => {
            if (index) {
                //index不为0表示向右边滑动
                swiperRef.current.activeIndex = prev.length - 1;     
                setRightM(newM)      
                return [...prev, res];
            } else{
                //index为0表示向左边滑动
                swiperRef.current.activeIndex = 1;    
                setLeftM(newM)
                return [res, ...prev];
            }
        });
    }

    const slidChange =  (prevIndex,index) => {
        if (index === 1) return
        if (index === 0 || index >= listData.length - 1) {       
            getDate(index) 
        }
    }


    useEffect(() => {
        const list = [];
        for (let i = m - 1; i <= m + 1; i++) {
            const may2018 = new Date(y, i);
            calendarDates.getDates(may2018).then(res => {
                list.push(res)
            })
        }
        setListData(list)
    }, [])

    

    return (
        <>
            {m}-
            <Swiper
                initialSlide={1}
                spaceBetween={30}
                onInit={(swiper) => {
                    swiperRef.current = swiper
                }}
                pagination={{
                    clickable: true,
                }}
                onSlideChange={(swiper) => {
                    slidChange(swiper.previousIndex,swiper.activeIndex)
                }}
                // virtual
                modules={[Pagination, Virtual]}
                className="mySwiper"
            >

            {
                listData.length && listData.map((item, index) => {
                    return (
                        <SwiperSlide key={'item' + index}>
                            {item.length && item.map((itemChild, itemChildIndex) => {
                                // eslint-disable-next-line react/jsx-key
                                return <div key={'itemChild' + itemChildIndex + index}>
                                    {itemChild.iso}---{itemChild.date}
                                    </div>
                            })}
                        </SwiperSlide>
                    )

                })
            }

        </Swiper>
        </>
    );
}


